
{{-- 继承布局模板 --}}
@extends( 'version-2017.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('version-2017/css/case.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>合作案例-广州便雅悯视光网络科技公司-验光配镜智能一体机,眼镜行业网络试戴和在线销售</title>
@endsection


@section('content')

    <section class="banner">

    </section>

    <article class="success-case">
        <div class="bym-wrapper">
            <h3>合作案例</h3>
            <p>
                满天星验光配镜智能一体机系列产品自上市以来就获得了业界的肯定和赞誉。通过不断进行技术优化升级，
                我们的设备已经实现了十分稳定的眼镜虚拟试戴效果，系统设计也很好地切合了行业需求，市场反响非常热烈。
                未来，我们将更加积极地结合市场与行业需求，更进一步优化升级产品功能，大力推广行业品质产品服务。
            </p>
        </div>
    </article>

    <!-- 合作案例-->
    <section class="case" id="case">

        {{--<h2 style="text-align: center; color: #dddddd;height: 400px; line-height: 400px;">敬请期待</h2>--}}

        <div class="bym-wrapper clearfix" >

            <dl class="case-nav">
                {{--<dt @click="changeCategory(2)" >合作案例</dt>--}}
                <dd  @click="changeCategory(2)" :class="[ currentCategoryId === 2 ? 'active' : '']"> 合作案例 </dd>
                <dd v-for="item in caseCategory" :class="[item.id === currentCategoryId ? 'active' : '']" v-text="item.name"  @click="changeCategory(item.id)"></dd>
            </dl>

            <ul class="case-list clearfix" >
                <li class="" v-for="article in articles" v-show="!loading">
                    <div class="cover"><img :src="article.thumb" alt=""></div>
                    <article>
                        <h4 v-text="article.title"></h4>
                        <p v-text="article.description"></p>
                        <time v-text="article.created_at"></time>
                        <a :href="'news/detail/'+article.id">阅读更多》</a>
                    </article>
                </li>
                <li class="case-loading-info" v-show="loading" >正在加载</li>
                <li class="case-loading-info" v-show="!loading && !articles.length" >没有内容</li>
            </ul>

            {{--分页--}}
            <bym-pagination v-if="typeof paginate === 'object' && !loading" v-on:change-page="changePage"
                            :total=paginate.last_page
                            :current="paginate.current_page"
                            :next="paginate.next_page_url"
                            :perv="paginate.prev_page_url"
            ></bym-pagination>
            </div>

    </section>
    <!-- 合作案例 END -->

    {{--分页模板--}}
    <script type="text/x-template" id="bym_pagination" >
        <ul class="bym-pagination">

            <li class="prev" v-if="current > 1"><a  href="javascript:;"  @click="clickHandle(current-1)">上一页</a></li>
            <li v-for="index in pageList" >
                <template v-if="typeof index === 'number'" >
                    <a href="javascript:;" v-text="index" @click="clickHandle(index)" :class="[index === current ? 'active' :'']"></a>
                </template>
                <template v-else>
                    <a v-text="index" class="disable"></a>
                </template>
            </li>
            <li class="next" v-if="current < total"><a href="javascript:;" @click="clickHandle(current+1)" >下一页</a></li>
        </ul>
    </script>


@endsection

@section('script')
    <script type="text/javascript" src="{{asset('version-2017/js/pagination.js')}}"></script>
    <script src="{{asset('version-2017/js/case.js')}}" type="text/javascript"></script>
@endsection